<!-- 应用详情 -->
<template>
  <div class="appCenter-detail-main">
    <div class="appCenter-detail-breadcrumb">
      <span class="V7_iconfont V7_iconV7tubiao_mianfanhui" style="color: #E0E6F0;margin-right:8px" @click="showSync=false"></span>
      <span>最近使用</span>/ <span>{{data.detail.name}}</span>
    </div>
    <div class="app-details-main">
        <div class="app-details-top">
            <img src="../../../assets/img/logo.png" alt="">
            <div>
              <p class="appCenter-detail-title">{{data.detail.name}}</p>
              <p class="appCenter-detail-text">版本: {{data.detail.applicationVersion}}</p>
              <p class="appCenter-detail-text">联系客服: 010-80455555</p>
            </div>
        </div>
        <div class="app-details-bottom">

              <el-tabs v-model="activeName">
                <el-tab-pane label="应用介绍" name="first" style="overflow: auto;">
                  <p class="appCenter-detail-description" style="margin-top:4px">{{data.detail.description}}</p>
                </el-tab-pane>
                <el-tab-pane label="产品版本" name="second" style="overflow: auto;">
                  <div class="versions">
                    <div class="appCenter-detail-version" :class="item.id === nowVersion ? 'selected' : ''" v-for="item in data.licenceList"  :key="item.id" @click="versionClick(item)" :title="item.name">{{item.name}}</div>
                  </div>
                  <div v-html="description">
                    <!-- <p class="appCenter-detail-description">{{description}}</p> -->
                  </div>
                </el-tab-pane>
              </el-tabs>
        </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, PropSync, Prop } from 'vue-property-decorator'
// import { commonAction } from '@/utils/common'
@Component({ name: 'AppDetails' })
export default class AppDetails extends Vue {
   @PropSync('show', { type: Boolean }) private showSync!: boolean
   @Prop({
     default: {
       licenceList: [],
       detail: {}
     }
   }) private data!: any

   public activeName = 'first'
   public nowVersion = ''
   public description = ''
   public versionClick (item) {
     this.nowVersion = item?.id
     this.description = item?.description
   }

   public getId () {
     this.nowVersion = this.data?.licenceList?.[0]?.id
     if (this.data?.licenceList?.[0]) {
       this.versionClick(this.data?.licenceList?.[0])
     }
   }
}
</script>
<style lang='stylus' scoped>
.appCenter-detail-main
  height 100%
  // display flex
  background #FFFFFF
  box-shadow 0px 0px 4px 0px #E0E6F0, 0px 1px 4px 0px #E0E6F0
  border-radius 10px
  width 100%
  display flex
  flex-direction: column;
  overflow auto
  // flex-direction: column;
.appCenter-detail-breadcrumb
  height: 56px;
  background: #FFFFFF;
  box-shadow: 0px 1px 4px 0px #E0E6F0;
  border-radius: 10px 10px 0px 0px;
  width 100%
  display flex
  align-items center
  padding-left 24px
  flex-shrink 0
  span
    cursor pointer
.app-details-top
  display flex
  padding 30px
  img
    width: 100px;
    height: 100px;
    border-radius: 20px;
    margin-right 23px
  // div
.appCenter-detail-title
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #303753;
  height 20px
  line-height 20px
  margin-bottom 16px
.appCenter-detail-text
  height: 14px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #767E91;
  margin-bottom 13px
.app-details-bottom
  padding-left 30px
  flex 1
/deep/.el-tabs__item.is-active
  color: #008BEE;
.appCenter-detail-version
  width: 100px;
  height: 32px;
  background: #FFFFFF;
  border: 1px solid #ECF0F3;
  border-radius: 4px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  text-align center
  line-height 32px
  display inline-block
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor pointer
.appCenter-detail-version.selected
  background: #008BEE;
  color #fff
.versions
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 20px;
  margin-bottom 29px
.appCenter-detail-description
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
</style>
